<template>
  <div class="page-user-profile">
    <van-nav-bar
      left-arrow
      @click-left="$router.back()"
      title="编辑资料"
      right-text="保存"
      @click-right="save()"
    ></van-nav-bar>
    <van-cell-group>
      <van-cell is-link title="头像" center @click="showPhoto=true">
        <van-image
          slot="default"
          width="56"
          height="56"
          fit="cover"
          round
          :src="userProfile.photo"
        />
      </van-cell>
      <van-cell
        is-link
        title="名称"
        :value="userProfile.name"
        style="{height:20%}"
        @click="showName=true"
      />
      <van-cell
        is-link
        title="性别"
        :value="userProfile.gender === 0 ? '男' : '女'"
        @click="showSex=true"
      />
      <van-cell is-link title="生日" :value="userProfile.birthday" @click="showBirthday=true"/>
    </van-cell-group>
    <van-popup v-model="showPhoto" position="bottom">
      <van-cell is-link title="本地相册选择图片" @click="$refs.mypic.click()"></van-cell>
      <van-cell is-link title="拍照"></van-cell>
      <input ref="mypic" @change="startUpload()" type="file" style="display:none">
    </van-popup>
    <van-popup v-model="showName" position="bottom">
      <van-field v-model.trim="userProfile.name" type="textarea" rows="3"></van-field>
    </van-popup>
    <van-action-sheet v-model="showSex" @select="onSelect" :actions="sexMenus" cancel-text="取消"></van-action-sheet>
    <van-popup v-model="showBirthday" position="bottom">
      <van-datetime-picker
        v-model="nowDate"
        type="date"
        :min-date="minDate"
        :max-date="maxDate"
        @cancel="showBirthday=false"
        @confirm="confirmDate"
      ></van-datetime-picker>
    </van-popup>
  </div>
</template>

<script>
import { apiUserProfile, apiUserPhoto, apiSaveProfile } from '@/api/user.js'
import dayjs from 'dayjs'
export default {
  name: 'user-profile',
  data () {
    return {
      nowDate: new Date(),
      minDate: new Date(1900, 0, 1),
      maxDate: new Date(2100, 0, 1),
      showBirthday: false,
      sexMenus: [{ name: '男' }, { name: '女' }],
      showSex: false,
      showName: false,
      showPhoto: false,
      userProfile: {}
    }
  },
  created () {
    this.getUserProfile()
  },
  methods: {
    async startUpload () {
      const fd = new FormData()
      fd.append('photo', this.$refs.mypic.files[0])
      const result = await apiUserPhoto(fd)
      this.userProfile.photo = result.photo
      this.showPhoto = false
    },
    confirmDate (val) {
      this.userProfile.birthday = dayjs(val).format('YYYY-MM-DD')
      this.showBirthday = false
    },
    onSelect (val) {
      this.userProfile.gender = val.name === '男' ? 0 : 1
      this.showSex = false
    },
    async getUserProfile () {
      this.userProfile = await apiUserProfile()
      this.nowDate = new Date(this.userProfile.birthday)
    },
    async save () {
      await apiSaveProfile(this.userProfile)
      this.$toast.success('更新用户资料成功')
    }
  }
}
</script>

<style scoped lang='less'></style>
